<template>
	<w-collapse v-model="collapseVisible" contentHeight="550px" :fullScreen="fullScreen" disabled :showArrow="false" title="任务明细">
		<fx-detials-table
			ref="detailsTable"
      :canAdd="false"
			:canDelete="false"
			:disabled="disabled"
			:tableColumn="tableColumn"
			:tableData="tableDetails"
			:tableEditColumnProp="tableEditColumnProp"
			:mainId="processTaskDetails.id"
			:fpSaveMain="fSaveMain"
			:fpSaveDetails="fpSaveDetails"
			:searchProps="['materialCode', 'materialName']"
			@on-details-refresh="onDetailsRefresh"
		>
		</fx-detials-table>
	</w-collapse>
</template>
<script>
const EDIT_INPUT_TYPE = ['remark']
export default {
	name: 'detailsInfo',
	props: {
		fullScreen: Boolean,
		processTaskDetails: {
			type: Object,
			default: () => {
				return {}
			}
		},
		tableDetails: {
			type: Array,
			default: () => {
				return []
			}
		},
		fSaveMain: Function,
		disabled: Boolean
	},
	data () {
		return {
			collapseVisible: true,
			tableColumn: [
				{
					prop: 'materialCode',
					label: '产品编码',
					width: '150px',
					required: true
				},
				{ prop: 'materialName', label: '产品名称', width: '150px' },
				{
					prop: 'routingName',
					label: '工序',
					width: '150px',
					required: true
				},
				{
					prop: 'procedureSeq',
					label: '工序层级',
					width: '100px',
					required: true
				},
				{
					prop: 'materialUnitName',
					label: '单位',
					width: '100px',
					required: true
				},
				{
					prop: 'planTotal',
					label: '计划产量',
					width: '100px',
					required: true
				},
				{
					prop: 'actualTotal',
					label: '实际产量',
					width: '100px',
					required: true
				},
				{
					prop: 'planStartDate',
					label: '计划开工时间',
					width: '150px'
				},
				{
					prop: 'actualStartDate',
					label: '实际开工时间',
					width: '150px'
				},
				{
					prop: 'planEndDate',
					label: '计划完工时间',
					width: '150px'
				},
				{
					prop: 'actualEndDate',
					label: '实际完工时间',
					width: '150px'
				},
				{
					prop: 'state',
					label: '生产状态',
					width: '100px',
					formatter: this.stateRender
				},
				{
					prop: 'remark',
					label: '备注',
					width: '150px',
					required: true,
					fxRender: this.reamrkRender,
					click: this.onCellClick('remark')
				}
			],
			tableEditColumnProp: EDIT_INPUT_TYPE
		}
	},
	methods: {
		// 生产状态
		stateRender (row) {
			switch (row.state) {
			case 0:
				return '未开始'
			case 1:
				return '进行中'
			case 2:
				return '已完工'
			default:
				return ''
			}
		},
		onDetailsRefresh () {
			this.$emit('on-details-refresh')
		},
		// 备注
		reamrkRender (h, { row, $index }) {
			h = this.$createElement
			return <fx-list-cell-input
				ref={`remark-${$index}`}
				vModel={row.remark}
				isEdit={row.isEdit}
				row={row}
				rowIndex={$index}
				placeholder='请输入备注'
				columnProp='remark'
			>
			</fx-list-cell-input>
		},
		onCellClick (type) {
			return (row) => {
				this.$refs.detailsTable.setRowEdit(row, type)
			}
		},
		checkDetailsUnSaving () {
			return this.$refs.detailsTable.checkDetailsUnSaving()
		},
		fpSaveDetails (detail) {
			// detail.id = this.processTaskDetails.id
			return this.onSaveDetailsHandler(detail)
		},
		onSaveDetailsHandler (params) {
			const { id, remark } = params
			const filterParam = {
				id,
				remark
			}
			return this.$fxApi('schedule.updateProcedureTaskDetail')({ data: filterParam }).then(res => {
				return Promise.resolve(res)
			})
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
</style>
